<template>
  <div>

    <!-- 条件搜托条 -->
    <div class="topSearch">
      <div class="leftBox">
        <div class="searchbox">
          <em>学年：</em>
          <el-select v-model="searchBox.xuenian" size="small" placeholder="请选择学年">
            <el-option v-for="(item,index) in yearList" :key="index" :label="item.timeName" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="searchbox">
          <em>缴费方案名称：</em>
          <el-input v-model="searchBox.programme" size="small" style="width:250px" placeholder="请输入方案名称"></el-input>
        </div>
        <div class="searchbox">
        <el-button type="primary" @click="getList" size="mini">查询</el-button>
        </div>
      </div>
      <div class="rightBox">
         <el-button type="primary" size="mini" @click="addNew">添加缴费方案</el-button>
      </div>
      <div class="clear"></div>
    </div>

    <!-- 列表内容↓ -->
    <div class="contentBox">
      <el-table :data="programmeList" :header-cell-style="headClass" border stripe style="width: 100%" height="90%">
        <el-table-column label="缴费方案名称">
          <template slot-scope="scope"><el-link @click="enterWatch(scope.row)" type="primary">{{scope.row.projectName}}</el-link></template>
        </el-table-column>
        <el-table-column label="方案状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.projectState=='Draft'">草稿</span>
            <span v-if="scope.row.projectState=='UnPublished'">未发布</span>
            <span v-if="scope.row.projectState=='Published'">已发布</span>
            <span v-if="scope.row.projectState=='StopUse'">停用</span>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="添加人" width="100"></el-table-column>
        <el-table-column label="添加时间" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | newtime}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="250" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.projectState=='UnPublished'||scope.row.projectState=='Draft'" @click="change(scope.row)" type="primary" size="mini" style="margin:0 5px 0 0;">编辑</el-button>
            <el-button v-if="scope.row.projectState=='UnPublished'" @click="sentBillBefore(scope.row)" type="primary" size="mini" style="margin:0 5px 0 0; font-size:14px;">发布账单</el-button>
            <el-button v-if="scope.row.projectState=='UnPublished'||scope.row.projectState=='Draft'" @click="drop(scope.row)" type="danger" size="mini" style="margin:0 5px 0 0;">删除</el-button>
            <el-button v-if="scope.row.projectState=='Published'" @click="stopUse(scope.row)" type="primary" size="mini" style="margin:0 5px 0 0;">停用</el-button>
            <span v-if="scope.row.projectState=='StopUse'">--</span>
          </template>
        </el-table-column>
    </el-table>
    <div class="paging">
      <el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :total="pageAll"></el-pagination>
    </div>
    </div>

<!-- 弹层内容↓ -->

<!-- 弹层结束↑ -->

  </div>
</template>

<script>
export default {
  data() {
    return {
      ccc:'缴费方案',
      searchBox:{
        programme:'',
        xuenian:''
      },
      dialogFormVisible1:false,
      programmeList:[],
      yearList:[],
      pageIndex:1,
      pageAll:0,

    }
  },
  filters:{
    newtime:function(val){
      if(!val) return '';
      return val.slice(0,19);
    }
  },
  mounted() {
    this.getYearList();
    // this.getList();
  },
  methods: {
    // 头部样式
    headClass:function(){
      return 'text-align: center;'
    },
    // 新增缴费方案
    addNew:function(){
      this.$router.push({name:'AddNewPaymentScheme',params:{flag:"ADD",watchOnly:false}});
    },
    getYearList:function(){
      this.$api.systemSetup.GetSearchList("time").then(res=>{
        console.log("获取学年列表",res)
        this.yearList = res.data.result.timeList;
        this.searchBox.xuenian = res.data.result.timeList[0].id;
        this.getList();
      })
    },
    // 缴费方案列表
    getList:function(){
      this.$api.systemSetup.GetPaymentSchemeList(this.searchBox.programme,this.searchBox.xuenian,this.pageIndex).then(res=>{
        //console.log("缴费方案列表",res);
        this.programmeList =  res.data.result.list;
        this.pageIndex = res.data.result.page;
        this.pageAll = res.data.result.total;
        // this.termList = res.data.result;
      })
    },
    // 页面改变
    handleCurrentChange:function(val){
      // console.log(val);
      this.pageIndex = val;
      this.getList();
    },
    // 编辑
    change:function(obg){
      this.$router.push({name:'AddNewPaymentScheme',params:{flag:"EDIT",projectId:obg.projectId,watchOnly:false}});
    },
    // 查看详情
    enterWatch:function(obg){
      this.$router.push({name:'AddNewPaymentScheme',params:{flag:"EDIT",projectId:obg.projectId,watchOnly:true}});
    },
    // 发布账单前验证
    sentBillBefore:function(obg){
      // this.$api.systemSetup.ReleasePlanBefore(obg.projectId).then(res=>{
      //   //console.log("发布账单前验证",res)
      //   if(res.data.status=='SUCCESS'){
      //     this.$message({
      //       message:'验证成功正在发布...',
      //       type:'success'
      //     })
      //     this.sentBill(obg);
      //   }
      // })
      this.sentBill(obg);
    },
    // 发布账单
    sentBill:function(obg){
      this.$api.systemSetup.ReleasePlan(obg.projectId).then(res=>{
        //console.log("发布",res)
        if(res.data.status =='SUCCESS'){
          this.$message({
            message:'发布成功！',
            type:'success'
          })
          if(obg.studentSource=='Student'){
            this.$message({
              // message:'成功发布'+res.data.result.buildCount+'条账单',
              message:'成功发布账单',
              type:'success'
            })
          }
          this.getList();
        }else{
            this.$message.error(res.data.message);
          }
      })
    },
    // 停用
    stopUse:function(obg){
      this.$confirm('确定停用所选缴费方案？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.$api.systemSetup.StopUse("Stop",obg.projectId).then(res=>{
          //console.log("停用返回",res)
          if(res.data.status=='SUCCESS'){
              this.$message({
                message:'所选缴费方案已停用！',
                type:'warning'
              })
            }else{
              this.$message.error(res.data.message);
            }
            this.getList();
        })
      }).catch(()=>{
        this.$message({
          type: 'info',
          message: '已取消停用'
        });
      })
    },
    // 删除列表
    drop:function(obg){
      this.$confirm('确定删除此条缴费方案？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{

        this.$api.systemSetup.StopUse("Delete",obg.projectId).then(res=>{
          //console.log("停用/删除返回",res)
          if(res.data.status=='SUCCESS'){
            this.$message({
                message:'删除成功!',
                type: 'success'
            })
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
        })
      }).catch(()=>{
        this.$message({
          type: 'info',
          message: '已取消停用'
        });
      })
    }
  }
}
</script>
